<route>
    {
        meta: {
            title: "编辑权限"
        }
    }
</route>

<script setup name="personalExampleFiled">
import useFileStore from '@/store/modules/file'

const route = useRoute()
const router = useRouter()
const fileStore = useFileStore()
const treeList = ref([])
const treeRef = ref(null)
const changeData = ref([])
const defaultProps = ref({
  children: 'children',
  label: 'name',
  isLeaf: 'file'
})

onMounted(() => {
  fileStore.permmissonGroupsFiles(route.query.id).then(res => {
    treeList.value.push(res)
  })
})

function loadNode(node, resolve) {
  if(node.data.id) {
    fileStore.permmissonGroupsFilesFileId(route.query.id, node.data.id).then(res => {
      return resolve(res.children)
    })    
  }
}

function changeRead(node, data) {
  data.canRead = !data.canRead
  changeData.value.push(data)
}

function changeWrite(node, data) {
  data.canWrite = !data.canWrite
  changeData.value.push(data)
}

function reduceArr(arr) {
  const res = new Map();
  return arr.filter((item) => !res.has(item['id']) && res.set(item['id'], 1));
}

function onSubmit() {
  let obj = reduceArr(changeData.value)
  let arr = []
  obj.forEach(item => {
    arr.push({fileId: item.id, canRead: item.canRead, canWrite: item.canWrite})
  })
  fileStore.permmissonGroupsPutFile(route.query.id, arr).then(res => {
    ElMessage({
      type: 'success',
      message: '修改成功'
    })
    router.push({
        name: 'personalExamplePowerIndex'
    })
  })
}
</script>

<template>
  <div>
    <page-header title="编辑文件权限"></page-header>
    <page-main>
      <el-row>
        <el-col :md="24" :lg="12">
          <el-card class="box-card">
            <div class="clearfix" slot="header">
              <div class="card-title">编辑权限-{{ route.query.name }}</div>
            </div>
            <el-tree
            :data="treeList"
            node-key="id"
            :props="defaultProps"
            :load="loadNode"
            ref="treeRef"
            lazy>
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>{{ node.label }}</span>
                  <span class="update-node">
                    <span v-if="data.canRead">可读</span>
                    <span v-else>不可读</span>-
                    <el-button type="primary" text @click.stop="changeRead(node, data)">修改</el-button>
                    <span v-if="data.canWrite">可写</span>
                    <span v-else>不可写</span>-
                    <el-button type="primary" text @click.stop="changeWrite(node, data)">修改</el-button>
                  </span>
                </span>
              </template>
            </el-tree>
          </el-card>
        </el-col>
      </el-row>
    </page-main>
    <fixed-action-bar>
      <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
    </fixed-action-bar>
  </div>
</template>

<style scoped>
.card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node .update-node {
  display: flex;
  justify-content: space-around;
}
.custom-tree-node .update-node span {
  display: block;
  margin-left: 8px;
}
.custom-tree-node .update-node button {
  padding: 0;
  height: 19px;
}
</style>